<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="挂号单ID" prop="registerNumber">
        <el-input
          style="width: 380px"
          v-model="queryParams.registerNumber"
          placeholder="请输入挂号单ID"
          clearable
        />
      </el-form-item>
      <el-form-item label="患者姓名" prop="patientName">
        <el-input
          style="width: 380px"
          v-model="queryParams.patientName"
          placeholder="患者姓名"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getOrders">搜索</el-button>
      </el-form-item>
    </el-form>
    <div align="center" :style="styled">请输入正确的挂号单ID查询</div>
    <div :style="style">
      <div class="app-container container" style="margin-top: 10px">
        <el-table :data="orderList" ref="multipleTable">
          <el-table-column label="订单号" align="center" prop="orderNumber" width="210"/>
          <el-table-column label="挂号单号" align="center" prop="code" width="180"
                           :show-overflow-tooltip="true"/>
          <el-table-column label="患者姓名" align="center" prop="patientName" width="180" :show-voerflow-tootip="true"/>
          <el-table-column label="总金额" align="center" prop="orderMoney" width="180" :show-voerflow-tootip="true"/>
          <el-table-column label="支付类型" align="center" prop="type" width="180" :show-voerflow-tootip="true"/>
          <el-table-column label="订单状态" align="center" prop="status" width="180" :show-voerflow-tootip="true">
            <template slot-scope="scope">
              {{scope.row.status==='0'?'未支付':'已支付'}}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" width="130" :show-voerflow-tootip="true">
            <template slot-scope="scope">
              <el-button type="success" icon="el-icon-view" style="width:95px" size="mini"
                         @click="centerDialogVisible=true">查看详情
              </el-button>

              <el-button type="danger" icon="el-icon-bank-card" style="width: 95px;margin-left: 0px"
                         v-if="scope.row.status==='0'" size="mini"
                         @click="pay(scope.row.orderNumber)">现金支付
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      title=""
      :visible.sync="centerDialogVisible"
      width="50%"
      center
      style="margin-top: 50px">
      <div class="app-container container">
        <el-row class="prow">
          <el-col :span="12">
            <span>订单号:</span>
            <div v-text="orderNumber" style="display: inline-block;margin-left: 50px"></div>
          </el-col>
          <el-col :span="12">
            <span>总金额:</span>
            <div v-text="totalMoney" style="display: inline-block;margin-left: 73px"></div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false" v-text="isPay"></el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
    import {orderList, registerCode, updateOrder} from "@/api/charge/select";
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";

    export default {
        name: "Dept",
        dicts: ['sys_normal_disable'],
        components: {Treeselect},
        data() {
            return {
                // 遮罩层
                loading: false,
                // 显示搜索条件
                showSearch: true,
                // 是否显示弹出层
                open: false,
                // 是否展开，默认全部展开
                isExpandAll: true,
                // 重新渲染表格状态
                refreshTable: true,
                style: {display: 'none'},
                styled: {display: 'block'},
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    registerNumber: undefined,
                    patientName: undefined,
                },
                orderList: [],
                registerNumber: '',
                orderNumber: '',
                totalMoney: '',
                //控制现金弹出框展示
                centerDialogVisible: false,
                // 表单参数
                form: {},
                // 表单校验
                rules: {},
                multipleSelection: [],
                isPay: '确定',
            }
        },
        methods: {
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.single = selection.length !== 1;
                this.multiple = !selection.length
            },
            getOrders() {
                this.loading = true;
                orderList(this.queryParams).then(response => {
                    this.orderList = response.rows;
                    this.orderNumber = this.orderList[0].orderNumber
                    this.totalMoney = this.orderList[0].orderMoney;
                    if (response.rows.length !== 0) {
                        this.style = {display: 'block'};
                        this.styled = {display: 'none'};
                    } else {
                        this.style = {display: 'none'};
                        this.styled = {display: 'block'};
                    }
                    this.getCode();
                });
                this.loading = false;
            },
            getCode() {
                registerCode(this.queryParams).then(response => {
                    this.registerNumber = response;
                    for (let i = 0; i < this.orderList.length; i++) {
                        this.orderList[i].code = response
                    }
                });
            },
            pay(orderNumber) {
                this.$confirm('确定支付？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'primary',
                    center: true
                }).then(() => {
                    updateOrder(orderNumber).then(response => {
                        this.getOrders();
                    });
                    this.$message({
                        type: 'success',
                        message: '支付成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消支付'
                    });
                });
            },
            handleQuery() {

            }
        }
    };
</script>
<style>
  .el-row {
    margin-bottom: 5px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .container {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
  }

  .prow {
    margin-top: 20px;
  }

  .pinfo {
    display: inline-block;
    margin-left: 50px;
  }

</style>
